<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">

    <div id="username">{{title}}</div>

  </div>

  <script>

    new Vue({
      el: '#app',
      data: {
        title: '你好div',
      },
      // 初始化  执行1次
      beforeCreate() {
        // 此在钩子函数中可以使用this,但是不能得到data和methods中的数据和方法
        console.log('beforeCreate', this.title)
      },
      // 数据注入完毕  执行1次
      created() {
        console.log('created', this.title)
      },
      // 模板解析成虚拟dom,即将挂载到真实dom中  执行1次
      beforeMount() {
        console.log('beforeMount')
      },
      // 虚拟dom挂载到真实的dom节点中,完成了  执行1次  推荐在此处写ajax
      mounted() {
        /* document.querySelector('#username').addEventListener('click', () => {
          console.log(1111)
        }) */
        console.log('mounted')

        setTimeout(() => {
          this.title = 'aaaa'
        }, 3000);

        setTimeout(() => {
          // 自已销毁自己
          this.$destroy()
        }, 4000);
      },
      // 更新完成之前  执行N次
      beforeUpdate() {
        console.log('beforeUpdate')
      },
      // 数据更新完毕 执行N次
      updated() {
        // console.log(document.querySelector('#username').innerHTML)
        console.log('updated')
      },
      // 即将销毁
      beforeDestroy() {
        console.log('beforeDestroy')
      },
      // 销毁完成
      destroyed() {
        console.log('Destoryed')
      }
    })
  </script>
</body>

</html>